<template>
  <div>
    <a-tabs>
      <a-tab-pane key="1" tab="交互">
        <div class="flex align-center justify-between margin">
          <span class="Gray_9e"
            >交互规则可以根据条件实时控制指定字段的显隐、是否可编辑、是否必填等属性。</span
          >
          <a-button type="primary" icon="plus" shape="round">添加交互</a-button>
        </div>

        <div class="flex flexColumn padding-sm">
          <div>
            <div class="ruleDrabItemContainer">
              <div class="grabIcon">
                <a-icon type="unordered-list" />
              </div>
              <div class="ruleItemCon">
                <div class="ruleNameInputBox">
                  <input
                    class="ruleNameInput"
                    value="规则1"
                    style="width: 39px"
                  />
                </div>
                <span class="ruleItemTextRow"
                  ><span class="leftLabel">当满足条件</span
                  ><span class="rightLabel"
                    ><span class=""
                      ><span
                        >档案状态<span class="mLeft5 mRight5">是其中一个</span
                        ><span class="WordBreak">已锁定</span></span
                      ></span
                    ><span class="mLeft20 gray_9e">时</span></span
                  ></span
                ><span class="ruleItemTextRow mTop10"
                  ><span class="leftLabel">只读</span
                  ><span class="rightLabel WordBreak"
                    >字段已删除, 出生日期, 员工姓名, 字段已删除, 字段已删除,
                    来自地区, 字段已删除, 性别, 邮箱</span
                  ></span
                >
                <div class="ruleItemOptions">
                  <a-icon type="check-square" />
                  <a-icon type="copy"></a-icon>
                  <a-icon type="delete"></a-icon>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="ruleDrabItemContainer">
              <div class="grabIcon">
                <a-icon type="unordered-list" />
              </div>
              <div class="ruleItemCon">
                <div class="ruleNameInputBox">
                  <input
                    class="ruleNameInput"
                    value="交互规则2"
                    style="width: 65px"
                  />
                </div>
                <span class="ruleItemTextRow"
                  ><span class="leftLabel">当满足条件</span
                  ><span class="rightLabel"
                    ><span class=""
                      ><span
                        >档案状态<span class="mLeft5 mRight5">是</span
                        ><span class="WordBreak">请完善</span></span
                      ></span
                    ><span class="mLeft20 gray_9e">时</span></span
                  ></span
                ><span class="ruleItemTextRow mTop10"
                  ><span class="leftLabel"></span
                  ><span class="rightLabel WordBreak">只读所有字段</span></span
                >
                <div class="ruleItemOptions">
                  <a-icon type="check-square" />
                  <a-icon type="copy"></a-icon>
                  <a-icon type="delete"></a-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="验证">
        <div class="flex align-center justify-between margin">
          <span class="Gray_9e"
            >验证规则可以规范数据的录入。当满足条件时，禁止保存记录并对指定字段提示错误。</span
          >
          <a-button type="primary" icon="plus" shape="round">添加验证</a-button>
        </div>

        <div class="flex flexColumn padding-sm">
          <div>
            <div class="ruleDrabItemContainer">
              <div class="grabIcon">
                <a-icon type="unordered-list" />
              </div>
              <div class="ruleItemCon">
                <div class="ruleNameInputBox">
                  <input
                    class="ruleNameInput"
                    value="验证规则1"
                    style="width: 65px"
                  />
                </div>
                <span class="ruleItemTextRow"
                  ><span class="leftLabel">当满足条件</span
                  ><span class="rightLabel"
                    ><span class=""
                      ><span
                        >档案状态<span class="mLeft5 mRight5">是</span
                        ><span class="WordBreak">请完善</span></span
                      ></span
                    ><span class="mLeft20 gray_9e">时</span></span
                  ></span
                ><span class="ruleItemTextRow mTop10"
                  ><span class="leftLabel">提示错误</span
                  ><span class="rightLabel WordBreak"
                    >档案状态、员工状态：222</span
                  ></span
                >
                <div class="ruleItemOptions">
                  <a-icon type="check-square" />
                  <a-icon type="copy"></a-icon>
                  <a-icon type="delete"></a-icon>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="ruleDrabItemContainer">
              <div class="grabIcon">
                <a-icon type="unordered-list" />
              </div>
              <div class="ruleItemCon">
                <div class="ruleNameInputBox">
                  <input
                    class="ruleNameInput"
                    value="验证规则2"
                    style="width: 65px"
                  />
                </div>
                <span class="ruleItemTextRow"
                  ><span class="leftLabel">当满足条件</span
                  ><span class="rightLabel"
                    ><span class=""
                      ><span
                        >员工状态<span class="mLeft5 mRight5">是</span
                        ><span class="WordBreak">待入职</span></span
                      ></span
                    ><span class="mLeft20 gray_9e">时</span></span
                  ></span
                ><span class="ruleItemTextRow mTop10"
                  ><span class="leftLabel">提示错误</span
                  ><span class="rightLabel WordBreak">的说法是</span></span
                >
                <div class="ruleItemOptions">
                  <a-icon type="check-square" />
                  <a-icon type="copy"></a-icon>
                  <a-icon type="delete"></a-icon>
                </div>
              </div>
            </div>
          </div></div
      ></a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      height: window.innerHeight - 112,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
    };
  },
  props: {
    config: {
      type: Object,
      default: function () {
        return this.$utils.clone(this.eipZeroCodeView, true).style;
      },
    },
  },
  methods: {},
};
</script>
<style scoped>
.flex {
  flex: 1;
}
.flexColumn {
  display: flex;
  flex-direction: column;
}
.Gray_9e {
  color: #9e9e9e !important;
}

.ruleDrabItemContainer {
  align-items: center;
  cursor: grab;
  display: flex;
  opacity: 1 !important;
  visibility: visible !important;
}

.ruleDrabItemContainer:hover .grabIcon {
  visibility: visible;
}

.ruleDrabItemContainer .grabIcon {
  height: 36px;
  line-height: 36px;
  margin-right: 3px;
  margin-top: 18px;
  text-align: center;
  visibility: hidden;
  width: 18px;
}

.ruleDrabItemContainer .grabIcon .icon {
  color: #9e9e9e;
}

.ruleItemCon {
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #eaeaea;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 26px;
  min-height: 78px;
  min-width: 0;
  padding: 14px 24px;
  position: relative;
  width: 100%;
}

.ruleItemCon:hover {
  box-shadow: inset 0 0 0 2px #eaeaea;
}

.ruleItemCon:hover .ruleItemOptions {
  visibility: visible;
}

.ruleItemCon.active {
  box-shadow: inset 0 0 0 2px #2196f3;
}

.ruleItemCon.active .ruleItemOptions {
  visibility: visible;
}

.ruleItemCon .gray_9e {
  color: #9e9e9e;
}

.ruleItemCon .ruleItemOptions {
  align-items: center;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 17px;
  display: flex;
  height: 32px;
  justify-content: space-around;
  position: absolute;
  right: 12px;
  top: -16px;
  visibility: hidden;
  width: 117px;
  z-index: 2;
}

.ruleItemCon .ruleItemOptions .RedHover:hover {
  color: #db493f;
}

.ruleItemCon .ruleNameInputBox {
  background: #fff;
  box-sizing: border-box;
  height: 20px;
  left: 12px;
  padding: 0 10px;
  position: absolute;
  top: -10px;
}

.ruleItemCon .ruleNameInput {
  border: none;
  border-bottom: 1px solid transparent;
  color: #2196f3;
  font-weight: 700;
  height: 100%;
}

.ruleItemCon .ruleNameInput:hover {
  border-bottom: 1px dashed #bdbdbd;
}

.ruleItemCon .ruleNameInput:focus {
  border-bottom: 1px solid #2196f3 !important;
}

.ruleItemCon .ruleItemTextRow {
  display: flex;
}

.ruleItemCon .ruleItemTextRow .leftLabel {
  color: #9e9e9e;
  margin-right: 20px;
  text-align: right;
  width: 75px;
}

.ruleItemCon .ruleItemTextRow .rightLabel {
  color: #333;
  flex: 1;
  min-width: 0;
}

.DropdownDeleteRuleTrigger {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.24);
  font-size: 14px;
  padding: 20px;
  width: 320px;
}

.DropdownDeleteRuleTrigger .title {
  color: #f51744;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 32px;
}

.DropdownDeleteRuleTrigger .deleteGroupBtns {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

.DropdownDeleteRuleTrigger .deleteGroupBtns .deleteBtn {
  background: #f51744;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  height: 28px;
  line-height: 28px;
  margin-left: 37px;
  text-align: center;
  width: 70px;
}

.DropdownDeleteRuleTrigger .deleteGroupBtns .deleteBtn:hover {
  background-color: #f44336;
}

.ruleFilterColumnOptionList {
  border-radius: 2px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.24);
  max-height: 270px;
  min-height: 100px;
  overflow-x: hidden;
  position: static;
  width: 314px;
}

.ruleFilterColumnOptionList .Menu {
  border-radius: 0;
  box-shadow: none;
  position: relative;
  width: 314px;
}

.ruleFilterColumnOptionList .Menu .Item-content {
  padding: 0 15px;
}

.ruleFilterColumnOptionList .Menu .Item-content .icon {
  color: #9e9e9e;
  font-size: 14px;
  margin-right: 10px;
  vertical-align: middle;
}

.ruleFilterColumnOptionList .Menu .Item-content > span {
  vertical-align: middle;
}

.ruleFilterColumnOptionList .ruleSearchWrap {
  background: #fff !important;
  position: relative;
}

.ruleFilterColumnOptionList .ruleSearchWrap input {
  border: none;
  border-bottom: 1px solid #f5f5f5;
  box-sizing: border-box;
  height: 41px;
  padding: 0 16px 0 35px;
  width: 100%;
}

.ruleFilterColumnOptionList .ruleSearchWrap input:focus {
  border-color: #f5f5f5 !important;
}

.ruleFilterColumnOptionList .ruleSearchWrap input::-webkit-input-placeholder {
  color: #bdbdbd;
}

.ruleFilterColumnOptionList .ruleSearchWrap input::-moz-placeholder {
  color: #bdbdbd;
}

.ruleFilterColumnOptionList .ruleSearchWrap input::-ms-input-placeholder {
  color: #bdbdbd;
}

.ruleFilterColumnOptionList .ruleSearchWrap .icon {
  position: absolute;
  top: 13px;
}

.ruleFilterColumnOptionList .ruleSearchWrap .search {
  left: 15px;
}

.ruleFilterColumnOptionList .ruleSearchWrap .close {
  color: #bdbdbd;
  right: 15px;
}

.ruleFilterColumnOptionList .ruleSearchWrap .close:hover {
  color: #757575;
}

.ruleFilterColumnOptionList .ming.Item .Item-content:hover .icon {
  color: #fff !important;
}

.ruleListSelectDropdown
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: #2196f3 !important;
  color: #fff !important;
  font-weight: 400 !important;
}

.ruleListSelectDropdown.ant-select-focused:not(
    .ant-select-disabled
  ).ant-select-single:not(.ant-select-customize-input)
  .ant-select-selector,
.ruleListSelectDropdown.ant-select:not(.ant-select-disabled):hover
  .ant-select-selector {
  border-color: #2196f3 !important;
}

.addConditionTrigger {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.24);
  color: #333;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  margin-bottom: 10px;
  padding: 8px 0;
  width: 160px;
}

.addConditionTrigger div {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  line-height: 36px;
  padding: 0 15px;
}

.addConditionTrigger div:hover {
  background: #f5f5f5;
}

.addConditionTrigger.rc-trigger-popup-hidden {
  display: none !important;
}
.mLeft5 {
  margin-left: 5px !important;
}
.mRight5 {
  margin-right: 5px !important;
}
.ruleItemCon .gray_9e {
  color: #9e9e9e;
}

.mLeft20 {
  margin-left: 20px !important;
}
</style>
